<template>
	<view class="height-screen bg-white">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('filed.recharge')}}</block>
		</cu-custom>
		<view style="margin: 20rpx 60rpx 0;">
			<u-form labelPosition="top" labelWidth="290">
				<u-form-item :label="$t('filed.yuanPhone')" borderBottom>
					<u-input v-model="phone" border="none" readonly></u-input>
				</u-form-item>
				<u-form-item :label="$t('filed.newPhone')" borderBottom>
					<u-input v-model="mobile" border="none" :placeholder="$t('public.placeholderContent')"></u-input>
				</u-form-item>
				<u-form-item :label="$t('login.code')" borderBottom>
					<u-input :placeholder="$t('login.placeholderCode')" border="none" clearable v-model="captcha"
						type="number">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60"
								:changeText="$t('login.codeChangeText')"></u-code>
							<view class="setButton" @tap.stop="getCode"
								style="width: 240rpx;height: 55rpx;background: rgba(6, 193, 104, 0.1);border-radius: 28rpx;">
								<text style="color: #06C168;" class="font-400 text-df">{{tips}}</text>
							</view>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
		</view>
		<view style="position: fixed;bottom: 120rpx;left: 25rpx;right: 25rpx;">
			<view class="setButton" style="height: 90rpx;background: #06C168;border-radius: 40rpx;"
				@tap.stop="changemobile">
				<text class="font-400 text-df text-white">{{$t('public.release')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		changemobile,
		sendSms
	} from '@/apis'
	export default {
		data() {
			return {
				phone: '',
				mobile: '',
				captcha: '',
				tips: this.$t('login.getCode'),
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				const res = await getInfo()
				this.phone = res.mobile
			},
			isShowAgree() {
				this.showAgree = !this.showAgree
			},
			async changemobile() {
				await this.helper.checkForm([
					['string', this.mobile, this.$t('filed.newPhone')],
					['string', this.captcha, this.$t('filed.code')],
				])
				await changemobile({
					mobile: this.mobile,
					captcha: this.captcha
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					uni.navigateBack()
				})
			},
			async getCode() {
				if (this.mobile) {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: this.$t('login.sendCode')
						})
						const res = await sendSms({
							mobile: this.mobile,
						})
						setTimeout(async () => {
							uni.hideLoading();
							uni.$u.toast(this.$t('message.success'));
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast(this.$t('login.waitCode'));
					}
				} else {
					this.helper.showToast(this.$t('login.placeholderAccount'))
				}
			},
			codeChange(text) {
				this.tips = text;
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item:not(:first-child) {
		margin-top: 40rpx !important;
	}

	/deep/ .u-form-item__body__left {
		margin-bottom: 30rpx !important;
	}
</style>